<template>
	<view :style="{'height':navHeightotal+'px'}">
	  <view class='nav-bar-wrap'  :style="{'padding-top':status+'px','background':bgColor}">
	    <view class='nav-bar' :style="{'height':navHeight+'px'}">
			<view class="nav-bar-btn_icon_light" style="height:32px;width:81px;" :style="{'background':btnColors}" v-if="visible">
				<view class='nav-bar-go_back' @click="onGoBack">
					<image :src="api_image+'/static/upload/image/icons/back-light.png'" class='nav-bar-img'></image>
				</view>	
				<view class="nav-bar-mid_line_light"></view>
				<view class='nav-bar-go_home' @click="bindToHome">
				  <image :src="api_image+'/static/upload/image/icons/home-light.png'" class='nav-bar-img'></image>
				</view>				
			</view>
			<view class='nav-bar-title absolute' style="color:#000000 ;font-size:17px" :style="{'line-height':navHeight+'px'}">{{title}}</view>  
	    </view>
	  </view>
	</view>
</template>
 
<script>
	export default {
		name: "navbar",
		props: {
			background: {
			      type: String,
			      value: 'rgba(255, 255, 255, 1)'
			    },
			    type: {
			      type: String,
			      value: 'light'
			    },
			    btnColors: {
			      type: String,
			      value: 'rgba(255, 255, 255, 1)'
			    },
			    textColor: {
			      type: String,
			      value: 'rgba(0, 0, 0, 1)'
			    },
			    title: {
			      type: String,
			      value: ''
			    },
			    visible: {
			      type: Boolean,
			      value: true
			    },
			    left: {
			      type: String,
			      value: ''
			    },
				bgColor:{
					 type: String,
					  value: '#fff'
				}
		},
		data() {
			return {
				...getApp().globalData.config,
				statusBarHeight: 40,
				navHeight: 44,
				barWidth: null,
				navHeightotal:100,
				status:44,
				
			};
		},
		created() {
			
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			let {statusBarHeight,system} = uni.getSystemInfoSync()
			// #ifdef APP-PLUS
			this.statusBarHeight = statusBarHeight
			// #endif
			// #ifdef H5
			this.statusBarHeight = statusBarHeight
			// #endif
			this.navHeightotal = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			this.status=statusBarHeight;
			this.navHeight=(system.indexOf('iOS') > -1 ? 44 : 48)
		},
		methods: {
			onGoBack() {
				uni.navigateBack()
			},
			bindToHome(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			}
		}
	}
</script>
 
<style lang="scss">
	.nav-bar-wrap {
	  width: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  // background: #fff;
	  z-index: 999;
	}
	
	.nav-bar {
	  font-size: 34rpx;
	  letter-spacing: 2rpx;
	  position: relative;
	  display: -webkit-flex;
	  display: flex;
	  align-items: center;
	  -webkit-align-items: center;
	  height: 44px;
	}
	
	.nav-bar-img {
	  width: 18px;
	  height: 18px;
	  z-index: 999;
	}
	
	.nav-bar-back {
	  margin-left: 5px;
	}
	
	.nav-bar-back .nav-bar-img {
	  margin-left: 5px;
	}
	
	.nav-bar-title {
	  font-weight: 600;
	  text-align: center;
	  vertical-align: center;
	  width: 100%;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  max-width: 340rpx;
	  font-weight: bold;
	}
	
	.nav-bar-title.absolute {
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	}
	
	.nav-bar_left{
	  display: flex;
	  align-items: center;
	  margin-left: 10px;
	}
	
	.nav-bar__img{
	  height: 25px;
	  width: 25px;
	  z-index: 999999;
	}
	
	.nav-bar-btn_icon_dark {
	  display: -webkit-flex;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 35rpx;
	  border-radius: 40rpx;
	  border: 1rpx solid rgba(255, 255, 255, .3);
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  margin-left: 10px;
	}
	
	.nav-bar-btn_icon_light {
	  display: -webkit-flex;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 35rpx;
	  border-radius: 40rpx;
	  border: 1rpx solid rgba(255, 255, 255, 0.3);
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  margin-left: 10px;
	}
	
	.nav-bar-go_back {
	  flex: 1;
	  -webkit-flex: 1;
	  height: 100%;
	  box-sizing: border-box;
	  display: flex;
	  display: -webkit-flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.nav-bar-mid_line_dark {
	  background-color: rgba(255, 255, 255, .3);
	  width: 1rpx;
	  height: 32rpx;
	  z-index: 999;
	}
	
	.nav-bar-mid_line_light {
	  background-color: #fff;
	  width: 3rpx;
	  height: 32rpx;
	  z-index: 999;
	}
	
	.nav-bar-go_home {
	  flex: 1;
	  -webkit-flex: 1;
	  height: 120%;	  
	  // background: red;
	  box-sizing: border-box;
	  display: flex;
	  display: -webkit-flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	}
</style>
